<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" style="width:200px;"
                          v-model="taskTime" type="datetime" size="small" placeholder="请选择时间" class="mRight10" clearable>
          </el-date-picker>
          <el-button type="primary" size="small" @click="queryForPage(1)">
            查询
          </el-button>
          <el-button type="primary" size="small" @click="queryForPage(1)">
            导出
          </el-button>
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="evaluate-top">
        <div class="evaluate-top-left">
          <CardContainer headerName="区域桥梁病害统计">
            <template slot="card-content">
              <div class='chart1' id='chart1'></div>
            </template>
          </CardContainer>
        </div>
        <div class="evaluate-top-middle">
          <CardContainer headerName="管理部门病害统计">
            <template slot="card-content">
              <div class='chart2' id='chart2'></div>
            </template>
          </CardContainer>
        </div>
        <div class="evaluate-top-right">
          <CardContainer headerName="桥梁病害统计">
            <template slot="card-content">
              <div class='chart3' id='chart3'></div>
            </template>
          </CardContainer>
        </div>
      </div>
      <div class="evaluate-middle">
        <div class="evaluate-middle-left">
          <CardContainer headerName="巡检分类统计">
            <template slot="card-content">
              <div class='chart4' id='chart4'></div>
            </template>
          </CardContainer>
        </div>
        <div class="evaluate-middle-middle">
          <CardContainer headerName="桥梁构建病害统计">
            <template slot="card-content">
              <div class='chart5' id='chart5'></div>
            </template>
          </CardContainer>
        </div>
        <div class="evaluate-middle-right">
          <CardContainer headerName="桥梁病害统计">
            <template slot="card-content">
              <div class='chart6' id='chart6'></div>
            </template>
          </CardContainer>
        </div>
      </div>
      <div class="evaluate-bottom">
        <CardContainer headerName="病害数量发展趋势">
          <template slot="card-content">
            <div class='chart7' id='chart7'></div>
          </template>
        </CardContainer>
      </div>
    </div>
  </div>
</template>
<script>
  import CardContainer from "@/views/healthMonitor/components/CardContainer";
  import echarts from "echarts";
  export default {
    mounted() {
      this.Chart1 ()
      this.Chart2 ()
      this.Chart3 ()
      this.Chart4 ()
      this.Chart5 ()
      this.Chart6 ()
      this.Chart7 ()
    },
    methods: {
      Chart1 () {
        this.chart1 = new echarts.init(document.getElementById('chart1'))
        let bridgeData=['崇川区','通州区','海门区','如东县','启东市','如皋市','海安市','南通市区']
        let xData = function() {
          let data = [];
          for (let i = 0; i < bridgeData.length; i++) {
            data.push(bridgeData[i]);
          }
          return data;
        }();
        this.chart1.setOption({

          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow",
              textStyle: {
                color: "#fff"
              }

            },
          },
          "grid": {
            "borderWidth": 0,
            "top": 110,
            "bottom": 95,
            textStyle: {
              color: "#fff"
            }
          },
          "legend": {
            x: '4%',
            top: '16%',
            textStyle: {
              color: '#90979c',
            },
            "data": ['桥梁数', '病害数']
          },


          "calculable": true,
          "xAxis": [{
            "type": "category",
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "splitLine": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitArea": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "data": xData,
          }],
          "yAxis": [{
            "type": "value",
            "splitLine": {
              "show": false
            },
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "axisTick": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "splitArea": {
              "show": false
            },

          }],
          "dataZoom": [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
              0
            ],
            bottom: 30,
            "start": 10,
            "end": 80,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
              color:"#d3dee5",

            },
            textStyle:{
              color:"#fff"},
            borderColor:"#90979c"


          }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
          }],
          "series": [
            {
            "name": "桥梁数",
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
              "normal": {
                "color": "rgba(255,144,128,1)",
                "label": {
                  "show": true,
                  "textStyle": {
                    "color": "#fff"
                  },
                  "position": "inside",
                  formatter: function(p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            "data": [
              39,
              47,
              55,
              61,
              79,
              43,
              44,
              32,
              28,
              33,
              24,
              40
            ],
          },

            {
              "name": "病害数",
              "type": "bar",
              "stack": "总量",
              "itemStyle": {
                "normal": {
                  "color": "rgba(0,191,183,1)",
                  "barBorderRadius": 0,
                  "label": {
                    "show": true,
                    "position": "inside",
                    formatter: function(p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [
                27,
                16,
                5,
                12,
                8,
                42,
                24,
                13,
                11,
                51,
                31,
                22
              ]
            },
          ]
        });
      },
      Chart2 () {
        this.chart2 = new echarts.init(document.getElementById('chart2'))
        let bridgeData=['四科1组','四科2组','四科3组','四科4组','四科5组','四科6组']
        let xData = function() {
          let data = [];
          for (let i = 0; i < bridgeData.length; i++) {
            data.push(bridgeData[i]);
          }
          return data;
        }();
        this.chart2.setOption({

          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow",
              textStyle: {
                color: "#fff"
              }

            },
          },
          "grid": {
            "borderWidth": 0,
            "top": 110,
            "bottom": 95,
            textStyle: {
              color: "#fff"
            }
          },
          "legend": {
            x: '4%',
            top: '16%',
            textStyle: {
              color: '#90979c',
            },
            "data": ['桥梁数', '病害数']
          },


          "calculable": true,
          "xAxis": [{
            "type": "category",
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "splitLine": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitArea": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "data": xData,
          }],
          "yAxis": [{
            "type": "value",
            "splitLine": {
              "show": false
            },
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "axisTick": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "splitArea": {
              "show": false
            },

          }],
          "dataZoom": [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
              0
            ],
            bottom: 30,
            "start": 10,
            "end": 80,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
              color:"#d3dee5",

            },
            textStyle:{
              color:"#fff"},
            borderColor:"#90979c"


          }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
          }],
          "series": [
            {
              "name": "桥梁数",
              "type": "bar",
              "stack": "总量",
              "barMaxWidth": 35,
              "barGap": "10%",
              "itemStyle": {
                "normal": {
                  "color": "rgba(255,144,128,1)",
                  "label": {
                    "show": true,
                    "textStyle": {
                      "color": "#fff"
                    },
                    "position": "inside",
                    formatter: function(p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [
                39,
                47,
                55,
                61,
                79,
                43,
                44,
                32,
                28,
                33,
              ],
            },

            {
              "name": "病害数",
              "type": "bar",
              "stack": "总量",
              "itemStyle": {
                "normal": {
                  "color": "rgba(0,191,183,1)",
                  "barBorderRadius": 0,
                  "label": {
                    "show": true,
                    "position": "inside",
                    formatter: function(p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [
                23,
                14,
                52,
                32,
                18,
                4,
                24,
                23,
                11,
                41,
              ]
            },
          ]
        });
      },
      Chart3 () {
        this.chart3 = new echarts.init(document.getElementById('chart3'))
        let bridgeData=['滨江','城闸','通吕','三牌楼','跃港','校北','洪江','观阳','五步口','生态','江余','海江']
        let xData = function() {
          let data = [];
          for (let i = 0; i < bridgeData.length; i++) {
            data.push(bridgeData[i]);
          }
          return data;
        }();
        this.chart3.setOption({
          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow",
              textStyle: {
                color: "#fff"
              }

            },
          },
          "grid": {
            "borderWidth": 0,
            "top": 110,
            "bottom": 95,
            textStyle: {
              color: "#fff"
            }
          },
          "legend": {
            x: '4%',
            top: '17%',
            textStyle: {
              color: '#90979c',
            },
            "data": ['桥梁病害数']
          },


          "calculable": true,
          "xAxis": [{
            "type": "category",
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "splitLine": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitArea": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "data": xData,
          }],
          "yAxis": [{
            "type": "value",
            "splitLine": {
              "show": false
            },
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "axisTick": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "splitArea": {
              "show": false
            },

          }],
          "dataZoom": [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
              0
            ],
            bottom: 30,
            "start": 10,
            "end": 80,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
              color:"#d3dee5",

            },
            textStyle:{
              color:"#fff"},
            borderColor:"#90979c"


          }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
          }],
          "series": [
            {
              "name": "桥梁病害数",
              "type": "bar",
              "stack": "总量",
              "barMaxWidth": 35,
              "barGap": "10%",
              "itemStyle": {
                "normal": {
                  "color": "rgba(255,144,128,1)",
                  "label": {
                    "show": true,
                    "textStyle": {
                      "color": "#fff"
                    },
                    "position": "inside",
                    formatter: function(p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [
                17,
                19,
                25,
                26,
                39,
                33,
                44,
                85,
                52,
                37,
                28,
                40,
              ],
            },
          ]


        });
      },
      Chart4 () {
        this.chart4 = new echarts.init(document.getElementById('chart4'))
        this.chart4.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },

          },
          backgroundColor: '#fff',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ['上部结构', '下部结构', '桥面系', '路灯','整改','照明']
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: '12'
              },
              formatter: function(value) {

                return value

              },
            },
            data: [12, 9, 7, 5,3,1]
          }],
          series: [{
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'white'
                }, {
                  offset: 1,
                  color: '#00aaff'
                }]),
              },
            },
            barWidth: 20,
            data: [12, 9, 7, 5,3,1]
          },

          ]
        });
      },
      Chart5 () {
        this.chart5 = new echarts.init(document.getElementById('chart5'))
        this.chart5.setOption({
          grid: {
            left: '5%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },

          },
          backgroundColor: '#fff',
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'black'
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: ['主梁', '横向', '桥墩', '桥台','支座','支座']
          }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: '12'
              },
              formatter: function(value) {

                return value + '条'

              },
            },
            data: [12, 9, 7, 5,3,1]
          }],
          series: [{
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'white'
                }, {
                  offset: 1,
                  color: '#FF9912'
                }]),
              },
            },
            barWidth: 20,
            data: [12, 9, 7, 5,3,1]
          },

          ]
        });
      },
      Chart6 () {
        this.chart6 = new echarts.init(document.getElementById('chart6'))
        this.chart6.setOption({
          color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} "
          },
          calculable : true,
          series : [
            {
              name:'病害类型',
              type:'pie',
              radius : [40, 90],

              roseType : 'area',
              data:[
                {value:627, name:'堵塞'},
                {value:824, name:'破损'},
                {value:422, name:'桥名牌'},
                {value:533, name:'桥头堡'},
                {value:434, name:'漏水孔'},
                {value:876, name:'其他'},
              ]
            }
          ]
        });
      },
      Chart7 () {
        let dateBase = new Date();
        let year = dateBase.getFullYear();
        let dottedBase = +dateBase + 1000 * 3600 * 24;
        let weekCategory = [];

        let radarData = [];
        let radarDataAvg = [];
        let maxData = 20;
        let weekMaxData = [];
        let weekLineData = [];
        // 周数据
        for (let i = 0; i < 7; i++) {
          // 日期
          let date = new Date(dottedBase -= 1000 * 3600 * 24);
          weekCategory.unshift([
            date.getMonth() + 1,
            date.getDate()
          ].join('/'));

          // 折线图数据
          weekMaxData.push(maxData);
          let distance = Math.round(Math.random() * 11 + 5);
          weekLineData.push(distance);

          // 雷达图数据
          // 我的指标
          let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
          let maxSpeed = averageSpeed + (+(Math.random() * 3).toFixed(2));
          let hour = +(distance / 1000 / averageSpeed).toFixed(1);
          let radarDayData = [distance, averageSpeed, maxSpeed, hour];
          radarData.unshift(radarDayData);

          // 平均指标
          let distanceAvg = Math.round(Math.random() * 8000 + 4000);
          let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
          let maxSpeedAvg = averageSpeedAvg + (+(Math.random() * 2).toFixed(2));
          let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
          let radarDayDataAvg = [distanceAvg, averageSpeedAvg, maxSpeedAvg, hourAvg];
          radarDataAvg.unshift(radarDayDataAvg);
        }

        // 颜色设置
        let color = {
          linearYtoG: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#f5b44d'
            }, {
              offset: 1,
              color: '#28f8de'
            }]
          },
          linearGtoB: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#43dfa2'
            }, {
              offset: 1,
              color: '#28f8de'
            }]
          },
          linearBtoG: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#1c98e8'
            }, {
              offset: 1,
              color: '#28f8de'
            }]
          },
          areaBtoG: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(35,184,210,.2)'
            }, {
              offset: 1,
              color: 'rgba(35,184,210,0)'
            }]
          }
        };
        this.chart7 = new echarts.init(document.getElementById('chart7'))
        this.chart7.setOption({
          title: {
            subtext: '病害'+ year + '/'+ weekCategory[0] +'---' + year + '/' + weekCategory[6],
            subtextStyle: {
              color: '#fff',
              fontSize: 16,
            },
            top: 10,
            left: 80
          },
          tooltip: {
            trigger: 'item'
          },
          grid: {
            left: 90,
            right: 80,
            bottom: 40,
            top: '20%',
          },
          xAxis: {
            type: 'category',
            position: 'bottom',
            axisLine: true,
            axisLabel: {
              color: 'rgba(255,255,255,.8)',
              fontSize: 12
            },
            data: weekCategory,
          },
          yAxis: {
            nameLocation: 'end',
            nameGap: 24,
            nameTextStyle: {
              color: 'rgba(255,255,255,.5)',
              fontSize: 14
            },
            max: maxData,
            splitNumber: 4,

            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                opacity: .1
              }
            },
            axisLabel: {
              color: 'rgba(255,255,255,.8)',
              fontSize: 12

            }
          },
          series: [
            {
            name: '每日跑步里程',
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            lineStyle: {
              normal: {
                color: color.linearBtoG,
                width: 3
              }
            },
            areaStyle: {
              normal: {
                color: color.areaBtoG,
              }
            },
            data: weekLineData,
            lineSmooth: true,
            markLine: {
              silent: true,
              data: [{
                type: 'average',
                name: '平均值'
              }],
              precision: 0,
              label: {
                normal: {
                  formatter: '平均值: \n {c}'
                }
              },
              lineStyle: {
                normal: {
                  color: 'rgba(248,211,81,.7)'
                }
              }
            },
            tooltip: {
              position: 'top',
              formatter: '病害数: {c}个',
              backgroundColor: 'rgba(28,152,232,.2)',
              padding: 6
            }
          },
            {
            name: '占位背景',
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: '#000',
                opacity: 0
              }
            },
            silent: true,
            barWidth: '50%',
            data: weekMaxData,
            animation: false
          },
            {
            name: '占位背景',
            type: 'bar',
            itemStyle: {
              normal: {
                show: true,
                color: '#000',
                opacity: .1
              }
            },
            silent: true,
            barWidth: '50%',
            barGap: 0,
            data: weekMaxData,
            animation: false
          }],
          backgroundColor: '#383546',
        });
      },
    },
    components: {
      CardContainer,
    },
  }
</script>
<style scoped lang="scss">
  @import '../insp.scss';
  .insp-content{
    width: 100%;
    height: 100%;

    .evaluate-top{
      width: 100%;
      height: 300px;
      .evaluate-top-left{
        width: 33%;
        height: 300px;
        float: left;
        .chart1 {
          width: 400px;
          height: 350px;
          background-size: 80% 80%;
          margin-top: -11%;
          margin-left: 11%;
        }
      }
      .evaluate-top-middle{
        width: 33%;
        height: 300px;
        float: left;
        .chart2 {
          width: 400px;
          height: 350px;
          background-size: 80% 80%;
          margin-top: -11%;
          margin-left: 11%;
        }
      }
      .evaluate-top-right{
        width: 33%;
        height: 300px;
        float: left;
        .chart3 {
          width: 400px;
          height: 350px;

          background-size: 80% 80%;
          margin-top: -11%;
          margin-left: 11%;
        }
      }
    }
    .evaluate-middle{
      margin-top: 2%;
      width: 100%;
      height: 300px;
      .evaluate-middle-left{
        width: 33%;
        height: 300px;
        float: left;
        .chart4 {
          width: 400px;
          height: 300px;
          background-size: 80% 80%;
          margin: 10px auto 0;
        }
      }
      .evaluate-middle-middle{
        width: 33%;
        height: 300px;
        float: left;
        .chart5 {
          width: 400px;
          height: 300px;
          background-size: 80% 80%;
          margin: 10px auto 0;
        }
      }
      .evaluate-middle-right{
        width: 33%;
        height: 300px;
        float: right;
        .chart6 {
          width: 400px;
          height: 300px;
          background-size: 80% 80%;
          margin: 10px auto 0;
        }
      }
    }
    .evaluate-bottom{
      margin-top: 4%;
      width: 100%;
      height: 400px;
      .chart7 {
        width: 100%;
        height: 300px;
        background-size: 80% 80%;
        margin: 10px auto 0;
      }
    }
  }


</style>
